<template>
  <view class="order test" :style="'min-height:'+$xyfun.xysys().windowHeight+'px'">
    <view class="tab flex tc tb p-tb-25 bg-w">
      <view v-for="(item,index) in orderStatus" :class="'col-'+orderStatus.length" @tap="setTab(item)">
        <view :class="tabStatus == item.value ? 'tm2' : 'fd'">
          {{item.name}}
          <view :class="'line '+ (tabStatus == item.value ? 'tm2b' : '')"></view>
        </view>
      </view>
    </view>
    <block v-if="!isLoading">
      <view class="order-list p-tb-30" v-if="!isEmpty">
        <view class="item br-10 m-lr-30 m-b-30 p-30 p-t bg-w" v-for="item in orderList" :key="item.id" @tap="$xyfun.to('/pages/user/shop/order_detail?id='+item.id+'&type=goods')">
          <view class="flex ali-cen p-b-10" style="border-bottom: 1rpx solid #ececec">
            <view class="yz-iconfont yz-dianpu tm2"></view>
            <text class="ts-28 tb m-l-20 tm2">{{item.store?item.store.name:'平台'}}</text>
          </view>
          <view class="flex m-t-10">
            <view>订单号：{{item.order_sn}}</view>
            <view class="m-l-auto tb tm2">{{item.status_text}}</view>
          </view>

          <view class="goods flex m-t-30">
            <view v-for="(goods,index) in item.item" class="ovh br-10 m-r-20 image" v-if="index<3">
              <image :src="goods.goods_image" mode="widthFix" />
            </view>
            <text class="xyicon icon-right m-l-auto"></text>
          </view>

          <view class="flex p-20 m-t-30 bd">
            <view>共{{item.total_num}}件商品</view>
            <view class="m-l-auto">实付款：¥{{item.total_fee}}</view>
          </view>
        </view>
      </view>
      <view v-else>
        <xy-empty text="暂无订单"></xy-empty>
      </view>
    </block>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty';
export default {
  components: {
    xyEmpty,
  },
  data() {
    return {

      isLoading:true,
      isEmpty: true,
      orderList: [],
      currentPage: 1,
      lastPage: 1,
      loadStatus: 'loadmore',
      orderStatus:[
        {value:'all',name:'全部'},
        {value:'0',name:'待付款'},
        {value:'1',name:'已付款'},
        {value:'2',name:'待收货'},
        {value:'3',name:'已完成'},//包含3和5两种情况
        {value:'4',name:'退款中'},
      ],
      tabStatus:0,
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad(options) {

    if(options.status != undefined){
      this.tabStatus = options.status;
    }


    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.orderList = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData(){
      this.$api.post({
        url: '/goods_order/lists',
        loadingTip:'加载中...',
        data: {
          page: this.currentPage,
          status: this.tabStatus
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.orderList = [...this.orderList, ...res.data];
          this.isEmpty = !this.orderList.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
        }
      });
    },


    setTab(item){
      this.tabStatus = item.value;
      this.currentPage = 1;
      this.orderList = [];
      this.loadData();
    },

  }
}
</script>

<style scoped lang="scss">
.tab{
  width: 100%;
  .line{height: 4rpx;width: 60rpx;margin: 10rpx auto 0;}
}

.order-list{
  .goods{
    line-height: 150rpx;
    .image{width: 150rpx;height: 150rpx;}
    .image image{width: 150rpx;}
  }
}

</style>
